<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>博客首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<!-- 自定义样式 -->
		<link rel="stylesheet" type="text/css" href="css/layout3.css" />
	</head>

	<body>
		<!--网页最上方的留白-->
		<header>
			<!-- class.container 容器定位 的作用是进行居中布局 -->
			<div class="container">
				<!-- pull-right 向右对齐  -->
				<span class="pull-right"><small>Power by</small> <b>Smart</b>Blogs</span>
			</div>
		</header>
		<!--网页 导航栏 在layout.css 文件中设置在背景图片-->
		<nav>
			<!-- class.container 容器定位 用于设置内容居中 -->
			<div class="container">
				<h1>
        <b>popo酱的博客</b> <small>——po就是主子，我是po奴才</small>
      </h1>

				<!--导航栏-->
				<div>
					<!-- class="nav navbar-nav" 定义导航条 -->
					<ul class="nav navbar-nav">
						<li><a href="HomeServlet">首页</a></li>
						<li><a href="ListServlet">文章</a></li>
					</ul>
					<!-- class="nav navbar-nav" 定义导航条 向右侧浮动 -->
					<ul class="nav navbar-nav navbar-right">
						<!-- 导航条中的文字使用 class="navbar-text" 样式 -->
						<li><span class="navbar-text">用户：admin</span></li>
						<li><a href="LogoutServlet">登出</a></li>
					</ul>
				</div>
				<!-- /导航栏 -->
			</div>
		</nav>
		<section>
			<div class="container">
				<div class="row">
					<div class="col-md-9">
						<!--文章标题-->
						<h2 th:text=${a.title} class="page-header">
							《我不是药神》观后的反思
						</h2>
						<!--文章信息-->
						<div class="gray">
							<span th:text="${a.userName}+'最后修改于'+${a.createdStr}">admin最后修改于2018-11-23 11:06</span>
							<span class="pull-right"> 
								<span th:text=${a.viewCount} class="fa fa-eye"> 13</span>
							<span th:text=${a.commentCount} class="fa fa-comment-o"> 4</span>
							</span>
						</div>
						<!--文章配图--> 
						<img th:src="'images/'+${a.imgName}" src="images/img1.jpg" class="img-rounded img-responsive center-block" />
						<!--文章正文-->
						<p th:text=${a.abs}></p>
						<p th:text=${a.content}></p>
						<!--文章标签-->
						<div>
							<span th:each="tag : ${a.tags}">
								<a th:text=${tag.title} class="btn btn-info btn-xs" href="list.html?tid=49">演员</a>
							</span>
						</div>
						<!--其他文章的引导链接-->
						<h3>文章导读：</h3>
						<ul>
							<li class="row-1">
								<a href="article2.html">前一篇：给大家推荐几款不错的耳机</a>
							</li>
							<li class="row-1">
								<a href="article3.html">后一篇：《炉石传说》卡牌游戏系统介绍</a>
							</li>
						</ul>
						<h3>相关阅读：</h3>
						<ul>
							<li class="row-1">
								<a href="article.html?aid=39">
								-影视演员-黄磊
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=36">
								-《我不是药神》观后的反思
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=2">
								-官宣体是什么意思
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=25">
								-王思聪吃热狗表情包是怎么来的
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=7">
								-汪峰唱歌了
								</a>
							</li>
						</ul>
						<h3>随机阅读：</h3>
						<ul>
							<li class="row-1">
								<a href="article.html?aid=2">
								-官宣体是什么意思
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=30">
								-双11"车祸现场"
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=27">
								-中国海警船编队今年第19次巡航钓鱼岛12海里
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=20">
								-按摩椅
								</a>
							</li>
							<li class="row-1">
								<a href="article.html?aid=40">
								-王者荣耀好玩么
								</a>
							</li>
						</ul>
						<!--评论开始-->
						<h3>评论：</h3>
						<!--评论1-->
						<div th:each="c : ${comments}" class="media">
							<div class="media-left col-md-1">
								<img class="media-object img-responsive" src="images/default.jpg">
							</div>
							<div class="media-body col-md-11">
								<div>
									<span th:text=${c.createdStr} class="gray">
										2018-11-23 11:44:
									</span>
									
								</div>
								<h4 th:text="${c.name}+':'+${c.content}" class="media-heading">admin:我看完了，哭的稀里哗啦的</h4>
							</div>
						</div>
						<!--评论2-->
						<div th:remove="all" class="media">
							<div class="media-left col-md-1">
								<img class="media-object img-responsive" src="images/default.jpg">
							</div>
							<div class="media-body col-md-11">
								<div>
									<span class="gray">
										2018-11-23 11:45 @admin :
									</span>
									<span class="pull-right">
										<a href="javascript:void(0)" class="recomment">回复</a>
									</span>
								</div>
								<h4 class="media-heading">rudy:这么感人么~我有空也看看</h4>
								<div class="unshow">
									<form role="form" action="article.html">
										<div class="form-group">
											<input type="hidden" name="reCommentId" value="51" />
											<input type="hidden" name="reCommentName" value="admin" />
											<input type="hidden" name="commentOnId" value="36" />
											<textarea name="commentContent" id="commentContent" class="form-control" rows="5"></textarea>
											<span class="pull-right"> <input type="button"
															class="btn btn-primary mymargin btn-xs subcomm" value="提交"></span>
											<span class="msg"></span>
										</div>
									</form>
								</div>
							</div>
						</div>
						<!--评论3-->
						<div th:remove="all" class="media">
							<div class="media-left col-md-1">
								<img class="media-object img-responsive" src="images/default.jpg">
							</div>
							<div class="media-body col-md-11">
								<div>
									<span class="gray">
										2018-11-23 11:47 @admin :
									</span>
									<span class="pull-right">
										<a href="javascript:void(0)" class="recomment">回复</a>
									</span>
								</div>
								<h4 class="media-heading">剑走偏锋:我看的时候也流泪</h4>
								<div class="unshow">
									<form role="form" action="article.html">
										<div class="form-group">
											<input type="hidden" name="reCommentId" value="51" />
											<input type="hidden" name="reCommentName" value="admin" />
											<input type="hidden" name="commentOnId" value="36" />
											<textarea name="commentContent" id="commentContent" class="form-control" rows="5"></textarea>
											<span class="pull-right"> <input type="button"
															class="btn btn-primary mymargin btn-xs subcomm" value="提交"></span>
											<span class="msg"></span>
										</div>
									</form>
								</div>
							</div>
						</div>
						<!--评论4-->
						<div th:remove="all" class="media">
							<div class="media-left col-md-1">
								<img class="media-object img-responsive" src="images/default.jpg">
							</div>
							<div class="media-body col-md-11">
								<div>
									<span class="gray">
										2018-11-23 11:47 :
									</span>
									<span class="pull-right">
										<a href="javascript:void(0)" class="recomment">回复</a>
									</span>
								</div>
								<h4 class="media-heading">剑走偏锋:确实是一部能发人深省的片子</h4>
								<div class="unshow">
									<form role="form" action="article.html">
										<div class="form-group">
											<input type="hidden" name="reCommentId" value="51" />
											<input type="hidden" name="reCommentName" value="admin" />
											<input type="hidden" name="commentOnId" value="36" />
											<textarea name="commentContent" id="commentContent" class="form-control" rows="5"></textarea>
											<span class="pull-right"> <input type="button"
															class="btn btn-primary mymargin btn-xs subcomm" value="提交"></span>
											<span class="msg"></span>
										</div>
									</form>
								</div>
							</div>
						</div>
						<form role="form" action="CommentServlet">
							<div class="form-group">
							<!-- 隐藏域作用:当需要给服务器传递某个数据而这个数据又不需要给用户展示的时候使用 -->
								<input type="hidden" name="onId" th:value=${a.oId} />
								<textarea name="content" id="commentContent" class="form-control" rows="5"></textarea>
								<span class="pull-right"> <input type="submit"
															class="btn btn-primary mymargin btn-xs subcomm" value="提交"></span>
								<span class="msg"></span>
							</div>
						</form>
					</div>
					<!--右侧内容开始-->
					<div class="col-md-3">

						<h2 class="page-header">
							<span class="fa fa-thumbs-o-up" ></span> 推荐阅读
						</h2>
						<!--搜索-->
						<ul class="list-group">
							<li class="list-group-item list-group-item-heading">
								<h3><span class="fa fa-search"></span> 文章搜索</h3></li>
							<li class="list-group-item">
								<!-- form-inline: 声明行内横向表单  -->
								<form class="form-inline" action="list.html" method="get">
									<!-- form-group 定义一项输入数据，必须包含label标签和input标签 -->
									<div class="form-group">
										<!-- 通过为 label 设置 .sr-only 类将其隐藏 -->
										<label class="sr-only" for="title">请输入文章标题</label>
										<!-- form-control 声明表单输入控件，用在input元素上 -->
										<input type="text" class="form-control" id="title" name="title" placeholder="请输入文章标题">
									</div>
									<button type="submit" class="btn btn-default">
										<span class="fa fa-search"></span>
									</button>
								</form>
							</li>
						</ul>
						<!--最新-->
						<ul class="list-group">
							<li class="list-group-item list-group-item-heading">
								<h3><span class="fa fa-calendar"></span> 最新内容</h3></li>
							<li class="list-group-item">
								<a class="row-1" href="article3.html">《炉石传说》卡牌游戏系统介绍</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article.html">《我不是药神》观后的反思</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article2.html">给大家推荐几款不错的耳机</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article.html">王者荣耀好玩么</a>
							</li>
							<li class="list-group-item">
								<a  class="row-1" href="article2.html">java好学不好学</a>
							</li>
						</ul>
						<!--评论-->
						<ul class="list-group">
							<li class="list-group-item list-group-item-heading">
								<h3><span class="fa fa-comment-o"></span> 评论最热</h3></li>
							<li class="list-group-item">
								<a class="row-1" href="article3.html">我要支持markDown</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article.html">《我不是药神》观后的反思</a>
							</li>
							<li class="list-group-item ">
								<a class="row-1" href="article2.html">荒野大镖客：救赎2</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article3.html">人民空军，生日快乐！</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article.html">mate20 pro真不错了</a>
							</li>
						</ul>
						<!--浏览-->
						<ul class="list-group">
							<li class="list-group-item list-group-item-heading">
								<h3><span class="fa fa-eye"></span> 浏览最多</h3></li>
							<li class="list-group-item">
								<a class="row-1" href="article2.html">mate20 pro真不错了</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article3.html">荒野大镖客：救赎2</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article.html">人民空军，生日快乐！</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article2.html"> 双11"车祸现场"</a>
							</li>
							<li class="list-group-item">
								<a class="row-1" href="article3.html">习近平将出席APEC第二十六次领导人非正式会议</a>
							</li>
						</ul>
						<!--分类-->
						<ul class="list-group">
							<li class="list-group-item list-group-item-heading">
								<h3><span class="fa fa-tag"></span> 分类标签</h3></li>
							<li class="list-group-item"><a class="row-1" href="list.html?tid=12">八卦(6)</a></li>
							<li class="list-group-item"><a class="row-1" href="list.html?tid=49">演员(5)</a></li>
							<li class="list-group-item"><a class="row-1" href="list.html?tid=28">游戏(4)</a></li>
							<li class="list-group-item"><a class="row-1" href="list.html?tid=25">心情(3)</a></li>
							<li class="list-group-item"><a class="row-1" href="list.html?tid=53">新闻(5)</a></li>
						</ul>
						<!--链接-->
						<ul class="list-group">
							<li class="list-group-item list-group-item-heading">
								<h3><span class="fa fa-link"></span> 友情链接</h3></li>
							<li class="list-group-item"><a target="_blank" href="http://www.163.com">网易</a></li>
							<li class="list-group-item"><a target="_blank" href="http://www.tedu.cn">达内</a></li>
							<li class="list-group-item"><a target="_blank" href="http://www.baidu.com">百度</a></li>
							<li class="list-group-item"><a target="_blank" href="http://cn.bing.com/">必应</a></li>
							<li class="list-group-item"><a target="_blank" href="http://www.qq.com">腾讯</a></li>
							<li class="list-group-item"><a target="_blank" href="http://www.jd.com">京东</a></li>
							<li class="list-group-item"><a target="_blank" href="http://www.taobao.com">淘宝</a></li>
							<li class="list-group-item"><a target="_blank" href="http://www.tmall.com">天猫</a></li>
						</ul>

					</div>
				</div>
			</div>
			<section>
				<!--网页底部， class.well 用于设置背景效果-->
				<footer class="well">
					<!-- class.container 的作用是进行居中布局 -->
					<div class="container">
						<b>Copyright © 2018 Tedu.cn All Rights Reserved
        京ICP备08000853号-56 <a href="http://www.tedu.cn/">达内时代科技集团有限公司</a>
        版权所有
      </b> <span class="pull-right"> <b>Version</b> 0.1.0
      </span>
					</div>
				</footer>
	</body>
	<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
	<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
	<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="bootstrap3/js/css3-mediaqueries.js"></script>
	<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>

</html>